<template>
    <div class="channel">
        <!-- v-if="setUp == 2" -->
        <div class="channel_Container">
            <!-- OTA渠道 -->
            <!-- <div class="channel_list">
                <div class="channel_list_title">
                    <dl>
                        <dt>渠道管理</dt>
                        <dd>
                            <span>OTA渠道</span>
                            <el-button type="text">查看介绍</el-button>
                        </dd>
                    </dl>
                </div>
                <div class="channel_list_conten">
                    <div class="channel_list_conten_item">
                        <div class="channel_list_conten_item_left">
                            <img src="../../../../assets/image/途家.jpg" />
                        </div>
                        <div class="channel_list_conten_item_right">
                            <div>
                                <dl>
                                    <dt>途家</dt>
                                    <dd>
                                        <div class="round"></div>直连中
                                    </dd>
                                    <dd>尚未关联房型</dd>
                                    <dd>
                                        <el-button size="mini" @click="setting('设置')">设置</el-button>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="channel_list_conten_item">
                        <div class="channel_list_conten_item_left">
                            <img src="../../../../assets/image/途家.jpg" />
                        </div>
                        <div class="channel_list_conten_item_right">
                            <div>
                                <dl>
                                    <dt>途家</dt>
                                    <dd>
                                        <div class="round"></div>未直连
                                    </dd>
                                    <dd></dd>
                                    <dd>
                                        <el-button size="mini" @click="openConnection">开通直连</el-button>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="channel_list_conten_item">
                        <div class="channel_list_conten_item_left">
                            <img src="../../../../assets/image/携程.jpeg" />
                        </div>
                        <div class="channel_list_conten_item_right">
                            <div>
                                <dl>
                                    <dt>携程</dt>
                                    <dd></dd>
                                    <dd></dd>
                                    <dd>
                                        <el-button size="mini" type="primary">立即订购</el-button>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->

            <!-- 观视界营销系统 -->
            <div class="channel_list">
                <div class="channel_list_title">
                    <dl>
                        <dt>
                            <!-- 渠道管理 -->
                        </dt>
                        <dd>
                            <span>观视界营销系统</span>
                            <el-button type="text">查看介绍</el-button>
                        </dd>
                    </dl>
                </div>
                <div class="channel_list_conten">
                    <!-- 微信小程序 -->
                    <div class="channel_list_conten_item" >
                        <div class="channel_list_conten_item_left">
                            <img src="../../../../assets/image/微信.png" />
                        </div>
                        <div class="channel_list_conten_item_right">
                            <div>
                                <dl>
                                    <dt>微信小程序</dt>
                                    <dd>
                                        <div v-if="this.channelIds.includes(2)">
                                            <div class="round"></div>直连中
                                        </div>
                                    </dd>
                                    <!-- <dd>
                                        <span v-if="this.channelIds.includes(2)">尚未关联房型</span>
                                    </dd> -->
                                    <dd>
                                        <el-button size="mini" type="primary" v-if="!this.channelIds.includes(2)"
                                            @click="setting('开始直连', '微信小程序')">立即订购</el-button>
                                        <el-button size="mini" v-if="this.channelIds.includes(2)"
                                            @click="setting('设置', '微信小程序')">设置</el-button>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog :title="title" :visible.sync="dialogVisible" width="25%">
            <div class="dialog_conten">
                <div class="dialog_conten_One">
                    <div class="dialog_content_top">
                        <div class="dialog_content_top_text" v-if="step == 1">
                            完成途家账号授权后，即可开始直连。点击下一步代表您已经阅读并同意《途家直连须知》
                        </div>
                        <div class="dialog_content_top_back" v-if="step == 2">
                            目前不支持子账号或子房源的同步，请使用主账号登录
                        </div>
                        <div class="dialog_content_img"></div>
                    </div>
                    <div class="dialog_content_bottom" v-if="step == 1">
                        <p>途家直连须知</p>
                        <div>
                            途家直连须知(简称“直连”)，是指酒店商户 (“您”) 在订单来了PMS系统中设置直连后，由订单来了与途家系统自动建立直连连接，实现您通过观世界管理途家系统中的订单。开通途家直连
                        </div>
                        <div>
                            功能后，您可以在“观世界”系统中管理途家渠道的方房型库存、价格、订单、聊天。在您开通直连功能前。请务必认真阅读和遵守本《用户须知》
                        </div>
                    </div>
                    <div class="dialog_content_bottom_form" v-if="step == 2">
                        <el-form label-position="right" label-width="100px" :model="formLabelAlign">
                            <el-form-item label="途家房东账号">
                                <el-input v-model="form.user" placeholder="请填写途家房东账号"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input type="password" v-model="form.pass" placeholder="请输入途家密码"></el-input>
                            </el-form-item>
                            <el-form-item label="验证">
                                <el-input v-model="form.checked" placeholder="请输入途家验证密码"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>



            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="startEmpower" v-if="step == 1">同意开始授权</el-button>
                <el-button type="primary" @click="startEmpower" v-if="step == 2">确定</el-button>
            </span>
        </el-dialog>


    </div>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible: false,
            title: '开始途家直连',
            step: 1,//直连步骤
            // setUp: 2,// 1直连 ,2设置
            form: {
                user: null,
                pass: null,
                checked: null,
            },
            channelLIst: {//渠道列表

            },
            channelIds: [],//已关联渠道数组
        }
    },
    created() {
        this.getConnectedChannel()
    },
    methods: {
        // 获取已直连渠道
        getConnectedChannel() {
            console.log('getConnectedChannel');
            let data = {
                hotel_id: sessionStorage.getItem('hotel_id'),//当前酒店id
            }
            console.log(data, 'data');

            this.my_request('supplier/hotel-pms-channel/check', data, 'GET').then(res => {
                console.log(res, '获取已直连渠道结果');
                let { data, code } = res.data
                if (200 === code) {
                    this.channelIds = data

                }
            })
        },

        // 设置
        /**
         * 
         * @param {*} operate 操作
         * @param {*} channel 渠道名
         */
        setting(operate, channel) {
            // this.setUp = 1
            // sessionStorage.setItem('settingOperate', 1);
            if (operate == '设置') {
                sessionStorage.setItem('settingOperate', 1)
            } else if (operate == '开始直连') {
                sessionStorage.setItem('settingOperate', 2)
            }
            sessionStorage.setItem('settingChannel', channel);
            if (channel == '微信小程序') {//微信小程序渠道id2，本地（门市）1
                sessionStorage.setItem('connectchannelId', 2);
            }
            this.$router.replace('/TopChannel/ConnectionSetting')

        },

        // 开通直连
        openConnection() {
            this.title = '开始途家直连'
            this.step = 1
            this.dialogVisible = true
        },
        // 开始授权
        startEmpower() {
            this.title = '授权途家账号'
            this.step = 2
        },
    }
}
</script>


<style lang="scss" scoped src="../../css/ChannelList.scss"></style>